<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>音乐网盘下载（所有音乐均来自www.51ape.com）</title>

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">

        <!-- 搜索引擎搜索后，显示的描述 -->
        <meta name="description"
            content="该站基于www.51ape.com音乐数据来源，简单实现了一个音乐的定向搜索功能（目前只能按歌手名搜索），如果能给您带来方便，则是本人将本站做到更好的动力！">
        <!-- 搜索关键词 -->
        <meta name="keywords"
            content="无损音乐百度网盘下载,无损音乐免费下载,无损音乐下载,ape音乐下载,flac音乐下载,百度网盘音乐下载,音乐下载,showlotus,51ape,ape,51ape音乐下载,www.51ape.com,51ape.com">
        <link rel="icon" href="./icon/musicIcon.png">
        <!-- 引入布局样式 -->
        <link rel="stylesheet" href="./CSS/index.css">
        <!-- 引入图标字体 -->
        <link rel="stylesheet" href="./icon/iconlist/iconfont.css">
        <!-- 引入Element-UI样式 -->
        <link rel="stylesheet" href="./node_modules/element-ui/lib/theme-chalk/index.css">
        <!-- 引入Mint-UI样式 -->
        <link rel="stylesheet" href="./node_modules/mint-ui/lib/style.css">
        <!-- 引入animate.css -->
        <link rel="stylesheet" href="./node_modules/animate.css/animate.css">
    </head>

<body>

    <div class="search-wrap" id="search">
        <iframe :src="iframeUrl" id="iframe" ref="iframe"
            style="visibility: hidden;position: absolute;z-index: -1;"></iframe>
        <!-- <i class="iconfont icon-geshou" style="color:red;font-size: 30px;"></i>
        <i class="iconfont icon-ziyuan" style="color:red;font-size: 30px;"></i>
        <i class="iconfont icon-game_singer" style="color:red;font-size: 30px;"></i>
        <i class="iconfont icon-vynil" style="color:red;font-size: 30px;"></i> -->
        <div :class="{'search-box': true, searched: hasSearched}">
            <mt-switch v-model="isDark" @change="handlerSwitch"></mt-switch>
            <el-autocomplete id="search-text" v-model.trim="searchKeywords" :fetch-suggestions="querySearchSinger"
                :trigger-on-focus="false" @select="handleSelectSinger" :placeholder="defaultKeywords" :autofocus="true">
            </el-autocomplete>
            <button class="btn" @click="handlerSearchBtn">
                <i class="iconfont icon-sousuo"></i>
            </button>
        </div>
        <div class="music-list">
            <h3 v-show="hasSearched" class="animate__animated animate__zoomInDown">
                点击即可跳转到网盘地址，然后直接粘贴密码，是不是很神奇(<b>❤</b> ω <b>❤</b>)</h3>
            <ul>
                <li v-for="(item,index) in currentMusicList" :key="item.musicUrl"
                    class="animate__animated animate__zoomInUp">
                    <a :href="item.cloudUrl" target="_blank" :url="item.cloudUrl"
                        @click="jumpToCloud">{{item.musicName}}</a>
                    <!-- <span :href="item.musicUrl" target="_blank"
                        @click="jumpToCloud(item.musicUrl)">{{item.musicName}}</span> -->
                    <input class="cloud-password" :value="item.cloudPwd" readonly />
                </li>
                <!-- <li v-show="searchKeyChange" v-for="item in preMusicList" v:key="item"
                    class="animate__animated animate__zoomInUp">
                    <a :href="item.musicUrl" target="_blank" @click="jumpToCloud">{{item.musicName}}</a>
                    <input class="cloud-password" :value="item.musicName" readonly />
                </li> -->
            </ul>
        </div>
    </div>
    <!-- 引入各种依赖包 -->
    <script src="./node_modules/axios/dist/axios.min.js"></script>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script src="./node_modules/element-ui/lib/index.js"></script>
    <script src="./node_modules/mint-ui/lib/index.js"></script>

    <!-- 引入获取经纬度/日出日落时间函数 -->
    <script src="./tools/sun/getLat&Long.js"></script>
    <script src="./tools/sun/getSunRise&Set.js"></script>

    <script>
        var search = new Vue({
            el: '#search',
            data: {
                singerInfo: [], // 歌手信息
                themeList: {}, // 主题列表
                searchKeywords: '', // 搜索关键字
                defaultKeywords: '周杰伦', // 默认搜索关键字
                currentSinger: {}, // 当前搜索歌手
                currentMusicList: [], // 当前歌曲列表
                hasSearched: false, // 是否已经触发搜索事件
                isDark: false, // 是否是深色主题
                cloudUrl: '', // 网盘地址
                cloudPwd: '', // 网盘密码
                iframeUrl: '',
                location: { // 经纬度
                    latitude: 0,
                    longitude: 0
                },
                sun: {} // 太阳日出日落时间
            },
            watch: {
                currentSinger: v => {
                    let singer = v === undefined ? ' ' : v.value
                    console.log('当前歌手为：' + singer)
                }
            },
            methods: {
                // 切换主题
                themeToggle(theme) {
                    var $body = document.body.style
                    $body.setProperty("--bgc", this.themeList[theme].bgc)
                    $body.setProperty("--textwrapbgc", this.themeList[theme].textwrapbgc)
                    $body.setProperty("--shadowcolor", this.themeList[theme].shadowcolor)
                    $body.setProperty("--musiccolor", this.themeList[theme].musiccolor)
                    $body.setProperty("--linearbarcolor", this.themeList[theme].linearbarcolor)
                    $body.setProperty("--switchIcon", this.themeList[theme].switchIcon)
                    $body.setProperty("--linear-bar-show", 'hidden')
                    setTimeout(() => {
                        $body.setProperty("--linear-bar-show", 'visible')
                    }, 400)
                },

                // 歌手关键字搜索
                querySearchSinger(query, cb) {
                    if (query === ' ') {
                        cb([])
                        return // 防止输入空格，触发搜索
                    }
                    var res = this.singerInfo.filter(v => v.value.indexOf(query) !== -1 || v.value.toLowerCase().indexOf(query) !== -1)
                    res.length === 0 ? cb([]) : cb(res)
                },

                // 歌手选中事件
                handleSelectSinger(item) {
                    this.handlerSearchBtn()
                    console.log(this.currentSinger)
                },

                // 搜索按钮点击事件
                handlerSearchBtn() {
                    if (this.searchKeywords === '') { // 为空则触发默认搜索
                        this.searchKeywords = this.defaultKeywords
                        this.searchSinger(this.defaultKeywords)
                        console.log(this.currentSinger)
                    } else {
                        this.searchSinger()
                    }
                    this.hasSearched = true
                },

                // 歌手搜索
                searchSinger() {
                    this.currentSinger = this.singerInfo.filter(v => v.value === this.searchKeywords)[0]
                    if (this.currentSinger === undefined) {
                        console.log('找不到该歌手事件')
                    } else {
                        this.getMusicById(this.currentSinger.id)
                    }
                },

                // 通过歌手ID获取歌手信息
                getMusicById(singerId) {
                    axios.get('./Data/singerMusicInfo/' + singerId + '.json').then(res => {
                        this.currentMusicList = res.data.filter(v => v.cloudPwd.length) // 过滤掉僵尸链接
                        // console.log(this.currentMusicList.length)
                    }).catch(err => {
                        console.log(err + '获取歌手歌曲信息失败')
                    })
                },

                // 点击歌曲链接事件
                jumpToCloud(e) {
                    var input = e.currentTarget.nextElementSibling
                    input.select()
                    document.execCommand("Copy")
                    let url = e.currentTarget.getAttribute('url')
                    this.iframeUrl = e.currentTarget.getAttribute('url')

                    // console.log(this.$refs['iframe'])

                    console.log(this.$refs['iframe'])
                    // console.log(document.getElementById('iframe'))
                    let ifr = this.$refs['iframe'], wrap = document.createElement('div')
                    wrap.appendChild(ifr.cloneNode(true))
                    console.log(wrap)


                    // this.getCloudAndPwd(e.currentTarget.getAttribute('url'))
                },

                // 获取歌曲链接网页的网盘地址和密码
                getCloudAndPwd(url) {
                    var JSONP = document.createElement("iframe");
                    JSONP.onload = JSONP.onreadystatechange = function () {
                        if (!this.readyState || this.readyState === "loaded" || this.readyState === "complete") {
                            // alert($("#demo").html());
                            JSONP.onload = JSONP.onreadystatechange = null//请内存，防止IE memory leaks
                        }
                    }
                    // JSONP.type = "text/javascript";
                    JSONP.src = url;
                    console.log(JSONP)
                    document.getElementsByTagName("body")[0].appendChild(JSONP);

                    // axios.get(url, res => {

                    //     console.log(res)
                    // })
                },

                // 点击主题切换按钮事件
                handlerSwitch(e) {
                    if (e) {
                        this.themeToggle('light')
                    } else {
                        this.themeToggle('dark')
                    }
                },

                // 获取日出日落时间
                getSunRise() {
                    getPosition().then(result => {
                        // 返回结果示例：
                        // {latitude: 30.318030999999998, longitude: 120.05561639999999}
                        // 一般小数点后只取六位，所以用以下代码搞定
                        let queryData = {
                            longtitude: String(result.longitude).match(/\d+\.\d{0,6}/)[0],
                            latitude: String(result.latitude).match(/\d+\.\d{0,6}/)[0],
                            channelType: '00'
                        }, timeZone = 0 - new Date().getTimezoneOffset() / 60 // 当前时区

                        this.location.longitude = queryData.longtitude
                        this.location.latitude = queryData.latitude
                        // console.log(queryData)
                        let res = computeSunRiseSunSet(Number(queryData.latitude), Number(queryData.longtitude), timeZone)
                        this.sun = computeSunRiseSunSet(Number(queryData.latitude), Number(queryData.longtitude), timeZone), currentTime = new Date()
                        if (currentTime >= res.SunRise && currentTime <= res.SunSet) {
                            this.isDark = false
                            this.themeToggle('light')
                            console.log('日已出，还未落')
                        } else {
                            this.isDark = true
                            this.themeToggle('dark')
                            console.log('日已落，还未出')
                        }
                    }).catch(err => {
                        console.log(err)
                    })
                }
            },
            created() {
                // 获取歌手信息
                axios.get('./Data/singerInfo.json').then(res => {
                    this.singerInfo = res.data.map(v => {
                        return {
                            id: v.id,
                            value: v.singer,
                            url: v.url,
                            hasPage: v.hasPage
                        }
                    })
                    console.log('歌手总计人数：' + this.singerInfo.length)

                    // this.handlerSearchBtn()
                }).catch(err => {
                    console.log(err + '请求歌手信息失败')
                })

                // 获取主题列表
                axios.get('./Data/theme.json').then(res => {
                    this.themeList = res.data
                    console.log('获取主题列表成功')
                }).catch(err => {
                    console.log(err + '请求主题失败')
                })
            },
            mounted() {
                this.getSunRise()
            },
        })
    </script>

</body>

</html>